<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
    <div class="min-h-screen bg-gray-100 flex justify-center items-center py-8">
      <div class="bg-white rounded-lg shadow-md w-full max-w-md mx-4">
        <!-- 标题区域 -->
        <div class="text-center pt-8 pb-4">
          <h1 class="text-2xl font-medium">支付订单</h1>
        </div>
  
        <!-- 金额展示 -->
        <div class="text-center pb-6">
          <div class="text-4xl font-medium mb-2">¥ {{ amount }}</div>
          <div class="text-gray-500 text-sm">订单应付 ¥{{ amount }}</div>
          <div class="text-gray-500 text-sm">订单倒计时：<span style="color: red;">5分00秒</span></div>
        </div>
  
        <!-- 支付方式选择 -->
        <div class="px-6">
          <!-- 支付宝支付 -->
          <div
            class="flex items-center py-4 border-t cursor-pointer"
            @click="selectPayment('alipay')"
          >
            <div
              class="w-10 h-10 bg-blue-500 flex items-center justify-center rounded-sm"
            >
              <el-icon class="text-white text-xl"><Money /></el-icon>
            </div>
            <div class="ml-3 flex-grow">支付宝支付</div>
            <div
              class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center"
              :class="{'bg-blue-500': selectedPayment === 'alipay'}"
            >
              <div
                v-if="selectedPayment === 'alipay'"
                class="w-3 h-3 bg-white rounded-full"
              ></div>
            </div>
          </div>
  
          <!-- 微信支付 -->
          <div
            class="flex items-center py-4 border-t cursor-pointer"
            @click="selectPayment('wechat')"
          >
            <div
              class="w-10 h-10 bg-green-500 flex items-center justify-center rounded-sm"
            >
              <el-icon class="text-white text-xl"><ChatDotRound /></el-icon>
            </div>
            <div class="ml-3 flex-grow">
              <div>微信支付</div>
              <div class="text-xs text-gray-500 mt-1">
                满20减10 使用中国银行信用卡
              </div>
            </div>
            <div
              class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center"
              :class="{'bg-green-500': selectedPayment === 'wechat'}"
            >
              <div
                v-if="selectedPayment === 'wechat'"
                class="w-3 h-3 bg-white rounded-full"
              ></div>
            </div>
          </div>
        </div>
  
        <!-- 底部支付按钮 -->
        <div class="px-6 py-8">
          <button
            class="w-full py-4 bg-orange-500 text-white rounded-full text-lg font-medium !rounded-button whitespace-nowrap cursor-pointer hover:bg-orange-600 transition-colors"
            @click="handlePay"
          >
            立即支付 ¥{{ amount }}
          </button>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from "vue";
  import { Money, ChatDotRound } from "@element-plus/icons-vue";
  import { ElMessage } from "element-plus";
  import router from "@/router";
  import {getCartListService} from "@/api/cart";
  import {postWeiXinPayService} from "@/api/pay";
  const amount=ref(0);
  const getCartList=async ()=>{
    const res=await getCartListService()
    res.cartList.forEach(item=>{
      amount.value+=item.menu.currentPrice*item.count
      // amount.value+=item.count*100
    })
    amount.value=amount.value.toFixed(2)

  }

  const postWeiXinPay=async()=>{
    const res=await postWeiXinPayService()
    localStorage.setItem('payCode',res.codeUrl)
    localStorage.setItem("orderId",res.orderId)
    localStorage.setItem("amount",res.amount)

  }
  getCartList()
  // 支付方式选择
  const selectedPayment = ref("alipay");
  
  const selectPayment = (payment: string) => {
    selectedPayment.value = payment;
  };
  
  // 处理支付
  const handlePay = async() => {
    const paymentMethod = selectedPayment.value === "alipay" ? "支付宝" : "微信";
    await postWeiXinPay()
    ElMessage({
      message: `已选择${paymentMethod}支付，正在处理支付请求...`,
      type: "success",
    });
    console.log(localStorage.getItem('orderId'))
    router.push('/pay-code')
    
    console.log(localStorage.getItem('orderId'))
  };
  </script>
  
  <style scoped>
  .bg-orange-500 {
    background-color: #f97316;
  }
  
  .bg-orange-600 {
    background-color: #ea580c;
  }
  
  .bg-blue-500 {
    background-color: #3b82f6;
  }
  
  .bg-green-500 {
    background-color: #22c55e;
  }
  </style>
  